學習完 Vue 之後,想要透過單元測試守護你的專案,但又不知道從何起手?
別擔心,快來訂閱作者最新系列文 《小白也能輕鬆瞭解的 Vue3 單元測試!》
讓你的 Vue 專案更上一層樓!
昨天介紹到動態元件的使用方法,我們可以使用 is
來快速切換元件中的內容,藉著省下不少程式碼上的複製貼上,並且在 DOM 結構上也不會渲染出不必要的內容:
<div id="app">
<button type="button" @click="pagename = 'mainpage'">switch to Main page</button>
<button type="button" @click="pagename = 'aboutpage'">switch to About page</button>
<button type="button" @click="pagename = 'contactpage'">switch to Contact page</button>
<component :is="pagename"></component>
</div>
但假如使用者在這些頁面中進行如表單輸入等等的操作,接著切換到另一個元件中,原本的元件頁面就會消失,並且觸發 destroyed
的生命週期鉤子,而當使用者在切換回原先的頁面時,就會發現已經輸入過的資料已經遺失了。
而這並不是什麼奇怪的 BUG ,我們可以透過 created
生命週期鉤子被觸發的現象觀察證實,此時載入的已經是另一個全新的元件,而如果這時我們想要能夠自在的切換元件間,又想要保留元件原先的資料內容,則可以使用 keep-alive
這個標籤。
這個標籤最主要的功能,就是保留如上述一樣的情境時,因為切換而遺失的資料內容,原先消失的原因是因為 Vue.js 在虛擬 DOM 上的計算,導致渲染時會以該元件作為一個重新渲染的節點,最後刷新整個元件內部的資訊,而要藉由 keep-alive
保留內部資訊的使用方法也很簡單,我們只要在外層包覆一層 keep-alive
標籤即可:
<div id="app">
<button type="button" @click="pagename = 'mainpage'">switch to Main page</button>
<button type="button" @click="pagename = 'aboutpage'">switch to About page</button>
<button type="button" @click="pagename = 'contactpage'">switch to Contact page</button>
<keep-alive>
<component :is="pagename"></component>
</keep-alive>
</div>
JavaScript部分
Vue.component('mainpage', {
template:`<div>This page is mainpage. Enter this page : {{ count }} </div>`,
data(){
return {
count : 0
}
},
activated() {
this.count++
},
destroyed() {
console.log('destroyed')
},
})
Vue.component('aboutpage', {
template:`<div>This page is aboutpage. Enter this page : {{ count }} </div>`,
data(){
return {
count : 0
}
},
activated() {
this.count++
},
destroyed() {
console.log('destroyed')
},
})
Vue.component('contactpage', {
template:`<div>This page is contactpage. Enter this page : {{ count }} </div>`,
data(){
return {
count : 0
}
},
activated() {
this.count++
},
destroyed() {
console.log('destroyed')
},
})
let vm = new Vue({
el:'#app',
data:{
pagename : 'mainpage'
}
})
我們在上面範例中加入了一些觸發生命週期的鉤子,透過開發者工具列可以看到的是,原先當元件切換時,理應當觸發 destroyed
的生命週期鉤子,並且顯示 destroyed
,然而最後結果卻沒有顯示,表示元件在切換到不同元件時,該元件並沒有被銷毀。
此時切換回原先的元件時,可以發現觸發了生命週期鉤子中的 activated
,表示元件並不是走原先 created
等初始化元件的過程,而 activated
在官方生命週期中則是表示元件重新被啟用的意思,並且可以發現先前的資料內容也同時被保存下來,如此一來將來有如表單輸入等等需要暫時保留資料的元件,可以透過 keep-alive
的這個標籤來達到保存的功能。
以上就是今天狀態保存 keep-alive
的說明與用法,明天將會介紹 Vue.js 的最後的一個好用功能 slot
。
明天就是 Vue.js 的最後一張啦,
橘橘表示興奮到模糊。